Phoenix LiveView

概要

Phoenix LiveView は、Elixir の Web フレームワーク Phoenix が提供する仕組みで、サーバーサイドで状態を保持しながら、リアルタイムでインタラクティブな UI を構築 できます。JavaScript を最小限に抑えつつ、WebSocket を介してサーバーとブラウザの差分だけをやり取りするのが特徴です。

LiveView 1.2 の主な新機能

記事「Phoenix LiveView 1.2 Released」より。

コロケーション CSS（Colocated CSS）

• 目玉機能。HEEx テンプレート内に CSS を直接埋め込める
• 前バージョンで JavaScript のコロケーションが導入され、今回スタイルシートにも対応
• スタイルのスコーピングに最新の CSS @scope ルールを活用
• phx-r 属性でテンプレートの境界を自動マークし、他コンポーネントへの影響を防ぐ
• ブラウザ互換性の都合からスコーピングは オプトイン

その他の改善

• カスタム TagFormatter（<script> / <style> タグのフォーマット対応）
• JavaScript Event 構造体の自動エンコーディング
• HEEx デバッグアノテーションのモジュール単位設定
• テスト警告のカテゴリ別設定
• 独立した JavaScript クライアントドキュメント

内部改善

• HEEx コンパイルがトークン化と解析の段階に分割され、マクロコンポーネント処理が改善

意義

保守性が高くスケーラブルな LiveView アプリの構築が容易に。CSS コロケーションにより、コンポーネント単位でスタイルを閉じ込められる。

関連ページ

• Elixir

参考資料

• Phoenix LiveView 1.2 Released（phoenixframework.org）